<template>
	<!-- 订单中心 -->
	<view class="wp">
		<!-- #ifndef H5 -->
		<nav-public :title="'我的订单'" :background="'#4B05A7'" height="500px" :color="'white'"></nav-public>
		<!-- #endif -->
		<view class="nav_bar">
			<view class="bg">
				<view class="bar1">
					<view class="cate" :class="{'active':barIdx1===1}" @click="changeBar(1)">拼团订单</view>
					<view class="cate" :class="{'active':barIdx1===2}" @click="changeBar(2)">50拼团订单</view>
					<view class="cate" :class="{'active':barIdx1===3}" @click="changeBar(3)">提货订单</view>
				</view>
			</view>
			<view class="bar2 barDuo">
				<view class="cate" :class="{'active':typeIdx===''}" @click="changeType('',2)">全部</view>
				<view class="cate" :class="{'active':typeIdx===1}" @click="changeType(1,2)">待发货</view>
				<view class="cate" :class="{'active':typeIdx===2}" @click="changeType(2,2)">待收货</view>
				<view class="cate" :class="{'active':typeIdx===3}" @click="changeType(3,2)">已完成</view>
				<!-- <view class="cate" :class="{'active':typeIdx===4}" @click="changeType(4)">退款</view> -->
			</view>
		</view>
		<view class="body" :class="{'setTop1':barIdx1===0,'setTop2':barIdx1==4}">
			<my-order :barIdx1="barIdx1" :list="list" :isloading="isloading" :isempty="isempty"></my-order>

		</view>
	</view>
</template>

<script>
	import myOrder from './components/myorder.vue'; //米分订单
	import {
		mapState,
		mapMutations
	} from 'vuex';
	export default {
		components: {
			myOrder,
		},
		data() {
			return {
				barIdx1: 0,
				typeIdx: '',
				page: 0,
				list: [],
				isloading: false,
				isempty: false ,
			}
		},
		onLoad(options) {
			if (options.type) {
				this.barIdx1 = Number(options.type)
			}
			this.init()
		},
		onReachBottom() {
			this.getList();
		},
		methods: {
			// 初始化数据
			init() {
				this.page = 0
				this.list = []
				this.isloading = true
				this.isempty = false
				this.getList();
			},
			// 获取数据列表
			async getList() {
				let obj = {
					url: 'UserCenter/pto_lst',
					type: 'pt'
				}
				// 拼团订单
				if (this.barIdx1 === 1) {
					obj = {
						url: 'UserCenter/pto_lst',
						type: 'pt'
					}
				}
				// 50拼团订单
				if (this.barIdx1 === 2) {
					obj = {
						url: 'UserCenter/mho_lst',
						type: 'pt'
					}
				}
				// 提货订单
				if (this.barIdx1 === 3) {
					obj = {
						url: 'GoodsCardCredit/orderList',
						type: 'pintuan'
					}
				}
				this.page++
				let body = {
					status: this.typeIdx,
					page: this.page,
				}
				const barIdx1 = this.barIdx1,
					typeIdx = this.typeIdx
				this.isloading = true
				this.isempty = false
				const res = await this.$axios(obj.url, 'POST', obj.type, body)
				this.isloading = false;
				if (barIdx1 != this.barIdx1 || typeIdx != this.typeIdx) {
					return
				}
				if (res.data.code == 200) {
					const newList = res.data.data.list
					this.list = [...this.list, ...newList];
					this.isempty = newList.length <= 0;
				}
			},
			// 切换以及导航
			changeBar(type) {
				if (type == this.barIdx1) return
				this.barIdx1 = type
				this.typeIdx = ''
				this.init()
			},
			// 切换二级导航
			changeType(v) {
				if (this.typeIdx == v) {
					return
				}
				this.typeIdx = v
				this.init()
			},
		}
	}
</script>

<style lang="scss">
	page {
		background: #FBF8FE;
	}

	.wp {
		background: #FBF8FE;
		padding-bottom: 60rpx;
	}

	.round {
		background: #ff233d;
		width: 16rpx;
		height: 16rpx;
		border-radius: 50%;
		position: absolute;
		right: 24rpx;
		top: 0;
	}

	.nav_bar {
		position: fixed;
		width: 100%;
		z-index: 100;
		background: linear-gradient(180deg, #4B05A7 0%, #8615E1 45%, #FBF8FE 100%);
		padding-top: 30rpx;

		.nav_search {
			height: 60rpx;
		}

		.bar1 {
			color: #FFFFFF;
			display: flex;
			align-items: center;
			line-height: 34rpx;
			text-align: center;
			font-size: 24rpx;
			padding-bottom: 30rpx;

			.cate {
				flex: 1;
				position: relative;
			}

			.active {
				color: #fff;
				font-weight: bold;
				font-size: 28rpx;
				margin-top: -4rpx;

				&::after {
					content: '';
					position: absolute;
					bottom: 0;
					left: 50%;
					transform: translateX(-50%);
					width: 28rpx;
					height: 6rpx;
					bottom: -12rpx;
					border-radius: 35%;
					background: #fff;
				}
			}
		}

		.bar2 {
			border: none;
			line-height: 75upx;
			font-weight: normal;
			display: flex;
			text-align: center;
			background: #FBF8FE;
			padding: 16rpx 20rpx;

			.cate {
				position: relative;
				padding: 0 36rpx;
				height: 58rpx;
				background: #FFFFFF;
				border-radius: 12rpx;
				line-height: 58rpx;
				color: #333333;
				font-size: 24rpx;
				margin-right: 26rpx;
				white-space: nowrap;
			}

			.active {
				background: linear-gradient(90deg, #9736E5 0%, #4B05A7 100%);
				color: #FFFFFF;
			}

			.round {
				right: 0;
			}
		}

		.bar3 {
			background: #FBF8FE;
			padding: 0 20rpx 10rpx;
			font-size: 24rpx;
			display: flex;

			.line_total {
				margin-right: 10rpx;
			}
		}

		.barDuo {
			justify-content: space-between;

			.cate {
				padding: 0 26rpx;
				margin-right: 0;
			}
		}

		.select_time {
			color: #fff;
			display: flex;
			align-items: center;
			justify-content: space-between;
			font-size: 28rpx;
			font-weight: bold;
			letter-spacing: 1px;
			padding: 0 20upx;
			margin: 0 0 20rpx;

			.time {
				display: flex;
				align-items: center;
			}

			.yticon {
				width: 40rpx;
				height: 40rpx;
				border: 1rpx solid #ffffff8c;
				border-radius: 50%;
				font-size: 24rpx;
				text-align: center;
				line-height: 40rpx;
			}

			.yTr {
				transform: rotateY(180deg);
			}

			.time_num {
				margin: 0 14rpx;
			}
		}

		.serch {
			view {
				background: rgba(231, 231, 231, .7);
				border-radius: 20px;
				color: #666;
				display: flex;
				align-items: center;
				justify-content: center;
				font-size: 32upx;
				height: 70upx;
				margin: 15upx 20upx;

				image {
					height: 40upx;
					margin-right: 20upx;
					width: 40upx;
				}
			}
		}

		.search_con {
			width: 100%;
			margin-top: -30rpx;
			padding: 0 20rpx;

			.uni-searchbar {
				width: 600rpx;
			}

			.uni-searchbar__box {
				justify-content: flex-start;
			}

			.filter {
				width: calc(100% - 600rpx);
				color: #fff;
				text-align: center;
				font-weight: bold;
				font-size: 30rpx;

				image {
					width: 30rpx;
					height: 30rpx;
					margin-left: 6rpx;
				}
			}
		}
	}

	.body {
		padding-top: 170rpx;
	}

	.setTop1 {
		padding-top: 244rpx;
	}

	.setTop2 {
		padding-top: 288rpx;
	}

	.filter_con {
		padding: 40rpx 20rpx;

		.fil_tit {
			margin: 36rpx 0;
		}

		.fil_it {
			width: 31%;
			line-height: 60rpx;
			border-radius: 80rpx;
			background: #FBF8FE;
			color: #333;
			text-align: center;
			font-size: 24rpx;
		}

		.fil_it_ac {
			background: #8917E2;
			color: #fff;
		}

		.fil_btn {
			width: 48%;
			line-height: 74rpx;
			border-radius: 50rpx;
			text-align: center;
			margin: 60rpx 0;
		}

		.fil_reset {
			background: #F0E1FF;
			color: #333333;
		}

		.fil_sure {
			background: linear-gradient(90deg, #B92DF1 0%, #8917E2 100%);
			color: #FFFFFF;
		}
	}
</style>